<template>
  <div class="my_customer full bgfff flex-row">
    <div class="seek text-c c82 box-middle" v-show="!seek" @click="seek = true">
      <i class="iconfont icon-sousuo margin-r5 font-20"></i>
      搜索
    </div>
    <header class="flex-col padding-r15 bgf5" v-show="seek">
      <div class="box1 bor-r bgfff padding-l10 margin-l15 flex-col flex-middle">
        <i class="iconfont icon-sousuo font-20"></i>
        <input type="text" class="box1 padding-lr10" v-model="seekText" placeholder="搜索">
        <div class="padding-lr10" v-show="seekText.length" @click="seekText = ''">
          <i class="iconfont icon-qingchu"></i>
        </div>
      </div>
      <div class="padding-l15 box-center" @click="getClientList(false,1)">{{backText}}</div>
    </header>
    <!-- <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :dataList="scrollData"> -->
    <ul class="customer_list box1">
      <li class="customer_it add_customer flex-col border-t" @click="toRouter('add_customer')">
        <div class="customer_img padding-r20 box-center">
          <i class="iconfont icon-xinzengkehu font-28"></i>
        </div>
        <div class="box1 flex-row padding-tb5">
          <div class="font-16 font-w box1">添加客户</div>
          <div class="font-12 c82">上传客户信息</div>
        </div>
        <div class="box-center">
          <i class="iconfont icon-jiantou"></i>
        </div>
      </li>
      <li class="customer_it flex-col border-t" v-for="(it,i) in clientList" :key="i" @click="openClientInfo(it.clientCode)">
        <div class="customer_img padding-r20">
          <div class="img-bg box-center font-18 cfff">{{it.clientName | getClientName}}</div>
        </div>
        <div class="customer_info box1 flex-row padding-tb5">
          <div class="box1 flex-col flex-middle">
            <span class="font-w font-16 box1">{{it.clientName}}-{{it.clientPhone}}</span>
            <span class="cred f-r">{{it.matchStatus | getMatchStatus}}</span>
          </div>
          <!-- <div class="tags">
                    <span>已匹配</span>
                    <span>已打电话</span>
                    <span>已报备</span>
                </div> -->
        </div>
      </li>
      <li class="padding-tb20 c82 text-c" v-show="!clientList.length">暂无客户</li>

    </ul>
    <!-- </v-scroll> -->
    <div class="cut-off border-t">
      <div class="font-12 position-a bgfff box-center">我的客户</div>
    </div>
    <div id="foot" class="cfff padding-20">
      <div class="bgred">
        <div class="text-c font-w">佣金规则</div>
        <ol>
          <li v-for="it in moneyList" :key="it.id">{{it.describe}}</li>
          <!-- <li>邀请新人认证获1000元购房券，购房券可自用可转让</li>
          <li>新人推荐成交，您坐享0.5%奖励</li> -->
        </ol>
      </div>
    </div>
    <v-header></v-header>
  </div>
</template>

<script>
import header from "../../components/index_nav";
// import scroll from "../../components/pull_refresh";
export default {
  name: "my_customer",
  data() {
    return {
      moneyList:[],//佣金规则
      seekText: "",
      backText: "取消",
      seek: false,
      page: 0,
      pageSize: 5,
      totalPage: 0,
      clientList: [],
      empty: false,
      pageStart: 0, // 开始页数
      pageEnd: 0, // 结束页数
      listdata: [], // 下拉更新数据存放数组
      scrollData: {
        noFlag: false //暂无更多数据显示
      }
    };
  },
  created() {
    this.$store.commit("index_nav", 2);
    this.getMoneyList();
  },
  activated() {
    this.getClientList();
  },
  components: {
    "v-header": header
    // "v-scroll": scroll
  },
  watch: {
    seekText(val) {
      this.backText = val.length ? "搜索" : "取消";
    }
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      that.getClientList();

    });
  },
  filters: {
    getLookStatus(i) {
      let lookHouseStatus = {
        "0": "未匹配",
        "1": "已匹配"
      };
      if (!i) {
        i = "0";
      }
      return lookHouseStatus[i];
    }
  },
  methods: {
    /**
     * 请求客户列表
     * has true=加载更多
     * seek = 1
     */
    getClientList(has = false, seek = 0) {
      let that = this;
      if (!has) {
        this.page = 0;
      }
      let page = (this.page = ++this.page);
      if (has && page > this.totalPage) {
        this.layer("已加载全部", "m");
        return;
      }

      let ops = {
        page,
        limit: that.pageSize
      };
      if (seek && !this.seekText.length) {
        this.seek = false;
        this.getClientList();
        return;
      }
      if (seek) {
        ops["clientName"] = this.seekText;
      }
      this.http
        .get("client/list", ops)
        .then(res => {
          that.totalPage = res.totalPage;
          if (has) {
            that.clientList.push(res.data.list);
          } else {
            that.clientList = res.data.list;
            if (that.clientList.length === 0) {
              //没有信息
              that.empty = true;
            } else {
              that.empty = false;
            }
          }
        })
        .catch(res => {});
    },
    /***
     * 获取佣金规则
     */
    getMoneyList(){
      this.http.get('describerule/list',{
        page:1,
        limit:10
      }).then(res=>{
        this.moneyList = res.data.list;
        console.log('11111111111111111='+JSON.stringify(res));
      })
    },
    onRefresh(done) {
      //   this.getClientList();

      console.log(11111111111111);
      done(); // call done
    },
    onInfinite(done) {
      this.page++;
      let end = (this.pageEnd = this.pageSize * this.page);
      let i = (this.pageStart = this.pageEnd - this.pageSize);

      let more = this.$el.querySelector(".load-more");
      for (i; i < end; i++) {
        if (i >= 30) {
          more.style.display = "none"; //隐藏加载条
          //走完数据调用方法
          this.scrollData.noFlag = true;

          break;
        } else {
          this.listdata.push({
            date: "2017-06-1" + i,
            portfolio: "1.5195" + i,
            drop: i + "+.00 %",
            state: 2
          });
          more.style.display = "none"; //隐藏加载条
        }
      }
      done();
    },
    openClientInfo(id) {
      this.$router.push({
        path: "/customer_info",
        query: {
          id
        },
        meat: {
          title: "客户详情"
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../css/list.scss";

.my_customer {
  padding-bottom: 0.5rem;

  .seek {
    height: 0.45rem;
    line-height: 0.45rem;
    text-align: center;
  }

  header {
    padding: 0.06rem 0.15rem 0.06rem 0;
    & > div {
      height: 0.33rem;
    }
  }
  .customer_list {
    overflow-y: auto;
  }

  .cut-off {
    margin: 0.2rem 0 0;
    padding-bottom: 0.2rem;
    div {
      height: 0.2rem;
      width: 0.8rem;
      top: -0.1rem;
      left: 50%;
      margin-left: -0.4rem;
    }
  }
  #foot {
    // padding-bottom: 1rem;
    & > div {
      border-radius: 0.1rem;
      padding: 0.2rem 0.2rem 0.3rem 0.4rem;
      line-height: 0.18rem;
      .font-w {
        margin-left: -0.2rem;
      }
      ol {
        list-style: decimal;
        li {
          padding-top: 0.05rem;
        }
      }
    }
  }
}
</style>
